// 规则类型(
// 11积分有效期 值是0则当年年底清零 值是日期则在指定日期清零
// 12积分单位名称 默认积分 可以用金豆等自定义单位
// 13积分兑换比例 值只能是正整数 
// 14积分多少天生效 值是天数 即消费获得积分多少天到账
// 21是否积分抵现 值0不开启 1开启
// 22抵现金额上限 值正整数 最多可抵扣消费金额比例
// 23抵现是否赠送积分 值0不开启 1开启 开启则使用了积分的订单可以继续积分
// 24积分抵现门槛(多少积分起用) 
// 25积分抵现订单门槛(订单金额最低多少钱起用)
// 31注册送积分 用户注册完成送多少积分
// 32消费送积分 每消费1元送多少积分
// )
<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleType" label="规则名称">
          <span v-if="model.ruleType === 11">积分清零规则</span>
          <span v-if="model.ruleType === 12">积分名称自定义</span>
          <span v-if="model.ruleType === 13">积分兑换比例</span>
          <span v-if="model.ruleType === 14">积分多少天生效</span>
          <span v-if="model.ruleType === 21">是否积分抵现</span>
          <span v-if="model.ruleType === 22">抵现金额上限</span>
          <span v-if="model.ruleType === 23">抵现是否赠送积分</span>
          <span v-if="model.ruleType === 24">积分使用门槛</span>
          <span v-if="model.ruleType === 25">积分抵现消费门槛</span>
          <span v-if="model.ruleType === 31">注册送积分</span>
          <span v-if="model.ruleType === 32">消费赠送积分</span>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleVal" label="设置规则">
          <template v-if="model.ruleType === 11">
            <a-radio-group name="ruleType11" @change="handleChange" v-model="model.ruleVal">
              <a-radio :style="radioStyle" value="0"> 永久有效 </a-radio>
              <a-radio :style="radioStyle" value="-1"> 每年最后一天失效 </a-radio>
              <a-radio :style="radioStyle" :value="model.ruleVal" v-if="model.ruleVal > 0">
                指定<a-input-number :min="min" :disabled="disabled" v-model="fixDays"></a-input-number>天之内有效
              </a-radio>
              <a-radio :style="radioStyle" value="1" v-if="model.ruleVal <= 0">
                指定<a-input-number :min="min" :disabled="disabled"></a-input-number>天之内有效
              </a-radio>
            </a-radio-group>
          </template>
          <template v-else-if="model.ruleType == 12">
            <a-input v-model="model.ruleVal"></a-input>
          </template>
          <template v-else-if="model.ruleType == 13">
            <a-input-number
              :min="1"
              :max="9999"
              v-model="model.ruleVal"
              :formatter="limitNumber"
              :parser="limitNumber"
            />积分=1元
          </template>
          <template v-else-if="model.ruleType == 14">
            <a-input-number
              :min="1"
              :max="9999"
              v-model="model.ruleVal"
              :formatter="limitNumber"
              :parser="limitNumber"
            />天生效
          </template>
          <template v-else-if="model.ruleType == 21">
            <a-radio-group name="ruleType21" v-model="model.ruleVal" defaultValue="0">
              <a-radio value="0"> 否 </a-radio>
              <a-radio value="1"> 是 </a-radio>
            </a-radio-group>
          </template>
          <template v-else-if="model.ruleType == 22">
            最多抵扣消费金额
            <a-input-number
              :min="1"
              :max="99"
              v-model="model.ruleVal"
              :formatter="limitNumber"
              :parser="limitNumber"
            />%
          </template>
          <template v-else-if="model.ruleType == 23">
            <a-radio-group name="ruleType23" v-model="model.ruleVal" defaultValue="0">
              <a-radio value="0"> 不赠送 </a-radio>
              <a-radio value="1"> 赠送 </a-radio>
            </a-radio-group>
          </template>
          <template v-else-if="model.ruleType == 24">
            达到
            <a-input-number
              placeholder="0是无门槛"
              :min="0"
              :max="99999"
              v-model="model.ruleVal"
              :formatter="limitNumber"
              :parser="limitNumber"
            />积分可用
          </template>
          <template v-else-if="model.ruleType == 25">
            最低消费
            <a-input-number
              placeholder="0是无门槛"
              :min="0"
              :max="99999"
              v-model="model.ruleVal"
              :formatter="limitNumber"
              :parser="limitNumber"
            />元
          </template>
          <template v-else-if="model.ruleType == 31">
            注册送
            <a-input-number
              placeholder="0是不赠送"
              :min="0"
              :max="99999"
              v-model="model.ruleVal"
              :formatter="limitNumber"
              :parser="limitNumber"
            />积分
          </template>
          <template v-else-if="model.ruleType == 32">
            消费1元送
            <a-input-number
              placeholder="0是不赠送"
              :min="0"
              :max="99999"
              v-model="model.ruleVal"
              :formatter="limitNumber"
              :parser="limitNumber"
            />积分
          </template>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from '@/api/manage'

/* 限制数字输入框只能输入整数 */
const limitNumber = (value) => {
  if (typeof value === 'string') {
    return !isNaN(Number(value)) ? value.replace(/[^\d]/g, '') : ''
  } else if (typeof value === 'number') {
    return !isNaN(value) ? String(value).replace(/[^\d]/g, '') : ''
  } else {
    return ''
  }
}

export default {
  name: 'PosPointsRuleModal',
  data() {
    return {
      limitNumber: limitNumber,
      title: '操作',
      visible: false,
      disabled: true,
      min: 1,
      model: {},
      fixDays: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      confirmLoading: false,
      validatorRules: {
        ruleVal: [{ required: true, message: '请设置规则值' }],
      },
      url: {
        add: '/marketing/posPointsRule/add',
        edit: '/marketing/posPointsRule/edit',
      },
    }
  },
  created() {},
  methods: {
    handleChange(e) {
      let checkedVal = e.target.value
      if (checkedVal == 1) {
        this.disabled = false
        this.min = 1
      } else {
        this.disabled = true
        this.min = 0
      }
      this.fixDays = null
    },
    buildReq() {
      let params = {}
      params.id = this.model.id
      if (this.model.ruleType === 25) {
        this.model.ruleVal = this.model.ruleVal * 100
      }
      params.ruleVal = this.model.ruleVal
      return params
    },
    add() {
      //初始化默认值
      this.edit({})
    },
    edit(record) {
      this.model = Object.assign({}, record)
      if (this.model.ruleType === 25) {
        this.model.ruleVal = this.model.ruleVal / 100
      }
      if (this.model.ruleType === 11) {
        if (this.model.ruleVal > 0) {
          this.disabled = false
          this.fixDays = this.model.ruleVal
        } else {
          this.disabled = true
          this.fixDays = null
        }
      }
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let params = this.buildReq()
          if (!params.ruleVal) {
            that.$message.warning('请设置规则')
            return false
          }
          console.log(this.model.ruleVal)
          if (this.model.ruleType === 11) {
            if (this.model.ruleVal >= 1 && !this.fixDays) {
              that.$message.warning('请设置规则')
              return false
            }
            if (this.model.ruleVal >= 1 && this.fixDays) {
              params.ruleVal = this.fixDays
            }
          }
          that.confirmLoading = true
          httpAction(httpurl, params, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
</style>